<template>
	<view>
		<xmInfo
		  :projectno="dataInfo.projectno"
		  :projectname="dataInfo.projectname"
		  ref="xmInfo"
		></xmInfo>
		<form>

			<!-- <view class="cu-form-group">
				<view class="title">工程编号</view>
				<view>{{dataInfo.projectno}}</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">工程名称</view>
				<view>{{dataInfo.projectname}}</view>
			</view> -->

			<view class="cu-form-group " style="margin-top: 10px;">
				<view class="title">停水时间</view>
				<view><u-input disabled placeholder="请输入停水时间" v-model="dataInfo.connectwatertime" class="input-align"
						:select-open="startTime"></u-input></view>
			</view>

			<view class="cu-form-group ">
				<view class="title">施工时间(小时)</view>
				<view>
					<u-input disabled placeholder="请输入施工时间" v-model="dataInfo.constructiontime" type="text"
						maxlength="200" class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">接水类别</view>
				<view>
					<js-select disabled v-model="dataInfo.name" dict-type="zf_conWater_type" placeholder="请选择接水类别"
						class="input-align"></js-select>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">接水管道口径</view>
				<view>
					<js-select disabled v-model="dataInfo.pipesize" dict-type="zf_pipe_size" placeholder="请选择接水管道口径"
						class="input-align"></js-select>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">管道直径</view>
				<view>
					<u-input disabled placeholder="请输入管道直径" v-model="dataInfo.diameter" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">行政区域</view>
				<view>
					<js-select disabled v-model="dataInfo.administrativearea" mode='multiple' dict-type="zf_Area"
						placeholder="请选择行政区域" class="input-align"></js-select>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title">信息收集表上传</view>
				<view>
					<js-uploadfile maxCount="0" :showProgress="false" :deletable="false" v-model="dataInfo.dataMap" :biz-key="dataInfo.id"
						biz-type="ConnectWaterJobCreate_image"></js-uploadfile>
				</view>
			</view>

			<u-picker mode="time" :params="params" v-model="startTime" @confirm="startConfirm"></u-picker>

			<!-- <view style="margin: 10px;font-size: 18px;font-weight: bold;">
				补充信息
			</view> -->
			<view class="cu-form-group " style="margin-top: 10px;">
				<view style="font-size: 22px;font-weight: bold;color: #3E97B0;">
					补充信息
				</view>
			</view>

			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>阀门位置</view>
				<view><u-input placeholder="请输入阀门位置" v-model="dataInfo.valveposition" type="text"
						class="input-align" ></u-input></view>
			</view>

			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>停水工作位置</view>
				<view>
					<u-input placeholder="请输入停水工作位置" v-model="dataInfo.cutoffarea" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>影响户数</view>
				<view>
					<u-input placeholder="请输入影响户数" v-model="dataInfo.population" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>重点单位</view>
				<view>
					<u-input placeholder="请输入重点单位" v-model="dataInfo.keyunit" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>停水范围</view>
				<view>
					<u-input placeholder="请输入停水范围" v-model="dataInfo.frontpressurearea" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>排水时长</view>
				<view>
					<u-input placeholder="请输入排水时长" v-model="dataInfo.wdischargetime" type="digit" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>冲洗时长</view>
				<view>
					<u-input placeholder="请输入冲洗时长" v-model="dataInfo.wsupplytime" type="digit" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>备注说明</view>
				<view>
					<u-input placeholder="请输入备注说明" v-model="dataInfo.remarks" type="text" maxlength="200"
						class="input-align"></u-input>
				</view>
			</view>
		
			<view class="cu-form-group ">
				<view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>停水文件</view>
			</view>
			<view style="background-color: #fff;padding:0 10px;">
				<view>
					<js-uploadfile v-model="dataInfo.dataMap" uploadType="all" :biz-key="dataInfo.id" uploadText="请上传文件"
						biz-type="ConnectWaterJobMore_file"></js-uploadfile>
				</view>
			</view>
			<!-- <view style="height: 80px" ></view>
            <view class="btn-group cu-bar foot ">
                <button class="cu-btn bg-blue shadow-blur">提交</button>
                <button class="cu-btn text-green line-blue shadow">完善信息</button>
            </view> -->
		</form>
		<view style="height: 80px"></view>
		<view class="btn-group cu-bar foot">
			<!-- <button class="cu-btn bg-green shadow-blur">提交</button> -->
			<view class="flex">
				<js-bpm-button v-model="dataInfo.bpm" :biz-key="dataInfo.id" form-key="Flow_ConnectWaterJob"
					@complete="submit"></js-bpm-button>
			</view>
		</view>
		<!-- <add-detail :modalNameDetail="modalNameDetail" @modalNameDetailEmit="modalNameDetailEmit" v-if="showAddDetail"></add-detail> -->

	</view>
</template>
<script>
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
export default {
	components: { xmInfo},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				startTime: false, //控制日期显示
				uploadOptions: {},
				switchA: false,
				date: '2024-03-12',
				index: -1,
				modalName: null,
				imgList: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg",
					"http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"
				],
				imageUrl: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg",
					"http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"
				],
				modalNameDetail: null,
				showAddDetail: false,
				dataInfo: {},
				picker: ['临时计划', '年度计划'],
				pickerArea: ['江北区', '渝北区', '两江新区'],
				showButton: true
			}
		},
		onLoad(e) {
			// this.dataInfo = JSON.parse(e.item)
			this.$u.api.zfgs.pmConnectwaterjobForm(e).then(res => {
				this.dataInfo = res.pmConnectwaterjob
			})
		},
		methods: {
			startConfirm(e) {
				this.dataInfo.connectwatertime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute +
					":" + e.second
			},
			SwitchA(e) {
				// this.switchA = e.detail.value
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			textareaAInput(e) {
				this.dataInfo.dmark = e.detail.value
			},
			addDetail() {

				this.showAddDetail = true

				this.modalNameDetail = 'bottomModal'

				console.log(this.modalNameDetail)
			},
			modalNameDetailEmit(e) {
				this.modalNameDetail = e
			},

			ViewImage(imageList, e) {
				uni.previewImage({
					urls: imageList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							console.log(res.confirm, this.dataInfo.dImageList, e, this.dataInfo.dImageList[e
								.currentTarget.dataset.index]);
							// this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1)
							// if (this.dataInfo.dImageListst) {
							//     console.log(e.currentTarget.dataset.index,this.dataInfo.dImageListst,'e====')
							//     this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1);
							// }
							// this.$set(this.dataInfo.dImageListst, e.currentTarget.dataset.index,1)
							// this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1);
							this.$delete(this.dataInfo.dImageListst, e.currentTarget.dataset.index);


						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						if (this.dataInfo.shiYaFile.length != 0) {
							this.dataInfo.shiYaFile = this.dataInfo.shiYaFile.concat(res.tempFilePaths);
						} else {
							this.dataInfo.shiYaFile = res.tempFilePaths;
						}

						console.log(this.dataInfo, 'this.dataInfo')
						this.$u.toast("上传成功");
					}
				});
			},
			PickerChange(e) {
				this.dataInfo.jieshui_type = e.detail.value
			},
			RadioChange(e) {
				this.dataInfo.jieshui_guandao = e.detail.value
			},
			PickerChangeArea(e) {

				this.dataInfo.jieshui_area = e.detail.value
			},
			imgListChange(e) {

			},
			submit() {
			console.log(this.dataInfo);
				if (!this.dataInfo.valveposition) {
					this.$u.toast("请输入阀门位置");
					return;
				}
				if (!this.dataInfo.cutoffarea) {
					this.$u.toast("请输入停水工作位置");
					return;
				}
				if (!this.dataInfo.population) {
					this.$u.toast("请输入影响户数");
					return;
				}
				if (!this.dataInfo.keyunit) {
					this.$u.toast("请输入重点单位");
					return;
				}
				if (!this.dataInfo.frontpressurearea) {
					this.$u.toast("请输入停水范围");
					return;
				}
				if (!this.dataInfo.wdischargetime) {
					this.$u.toast("请输入排水时长");
					return;
				}
				if (!this.dataInfo.wsupplytime) {
					this.$u.toast("请输入冲洗时长");
					return;
				}
				if (!this.dataInfo.remarks) {
					this.$u.toast("请输入备注说明");
					return;
				}
				if (!this.dataInfo.dataMap || !this.dataInfo.dataMap.ConnectWaterJobMore_file) {
					this.$u.toast("请上传停水文件");
					return;
				}
				this.dataInfo.status = 4;
					this.$u.api.zfgs
						.pmConnectwaterjobmoreSave(this.dataInfo)
						.then((res) => {
							if (res.result == "true") {
								this.$u.toast(res.message);
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									});
								}, 500);
							} else {
								uni.showModal({
									title: '提示',
									content: res.message,
									showCancel: false,
									success: function(res) {}
								});
							}
						});
				
			},

		}
	}
</script>
<style lang="scss" scoped>

	/deep/.u-input__input.data-v-460c1d26 {
		text-align: right !important;
	}

	.action {
		color: #303133;
	}

	.title {
		flex-shrink: 0;
	}

	.text-sl {
		font-size: 22px !important;
	}

	.cu-bar {
		min-height: 80px;
	}

	.cu-btn {
		font-size: 16px;
		height: 40px;
	}

	.foot {
		z-index: 997;
		background: #fff;
	}

	.green {
		color: green;
	}

	.input-align {
		text-align: right;
	}

	::v-deep .u-input__input {
		text-align: right;
	}

	.text-xs {
		font-size: 18rpx !important;
	}
</style>